<!-- 确认报名 -->
<template>
	<Layout className="confirmBaom">
    <fa-navbar title="确认报名单" :border-bottom="false"></fa-navbar>
    <countdown v-if="validity_desc" className="time" :minutes="validity_desc.minutes" :seconds="validity_desc.seconds" />
    <view v-if="detail" class="top box">
      <view class="name">
        <image src="../static/imgs/bg1.png" mode="aspectFill" class="img"></image>
        <view class="title">
          <view class="u-line-1 f32 color-000 mb10">{{detail.activity.title}}</view>
        </view>
      </view>
      <image src="../static/imgs/bg2.png" mode="aspectFill" class="img2"></image>
      <image src="../static/imgs/bg3.png" mode="aspectFill" class="img3"></image>
      <view class="con" style="border-bottom: none;">
        <view v-for="(item,  index) in fields" :key="index" class="p f28 mb25">
          <text class="color-666">{{item.field_label}}：</text>
          {{item.field_value}}
        </view>
      </view>
    </view>
   <!-- <view class="main box f24 mb25">
      <view class="b flex-bect mb25 f28 color-333">报名费用</view>
      <view class="p flex-bect mb25 color-666"><text>半程马拉松 ( x1)</text><text>￥ 100.00</text></view>
      <view class="p flex-bect mb25 color-666"><text>优惠</text><text>-￥ 0.00</text></view>
      <view class="p flex-bect mb25 color-666"><text>小计</text><text>￥ 100.00</text></view>
    </view>
    
    <view class="main box f24 flex-bect">
      <text class="f28 color-333 b">合计</text>
      <text>￥ 100.00</text>
    </view> -->
    <!-- <view class="main box f24 flex-bect">
      <text class="f28 color-333 b">合计</text>
      <text class="price">￥ {{detail.price}}</text>
    </view> -->
    <!-- 底部操作区域 -->
    <zb-bottom v-if="detail" :h="180" class-name="flex-bect">
      <text class="f26 color-666">合计:</text>
      <view class="flex-1 color-red f32 b">￥{{detail.price}}</view>
      <view v-if="validity_desc.minutes == 0 && validity_desc.seconds === 0" class="color-999">订单已失效</view>
      <view v-else class="submit-btn"  @click="linkTo">立即支付</view>
    </zb-bottom>
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
        title:'2025阜阳马拉松暨中阜阳马拉松暨中...',
        emptyShow:false,
        canClick:false,
        stepList:[
          {id:1, name:'开始报名', date:'2025-08-15', time:'10:00:00', icon: require('@/home/static/imgs/match-icon1.png')},
          {id:2, name:'报名截止', date:'2025-08-15', time:'10:00:00', icon: require('@/home/static/imgs/match-icon2.png')},
          {id:3, name:'开始比赛', date:'2025-08-15', time:'10:00:00', icon: require('@/home/static/imgs/match-icon3.png')},
          {id:4, name:'比赛结束', date:'2025-08-15', time:'10:00:00', icon: require('@/home/static/imgs/match-icon4.png')}
        ],
        detail:null,
        fields:[],
        validity_desc:null
			}
		},
    onLoad(e){
      this.register_id = e.id;
      this.$api.activityRegisterInfoApi({register_id: e.id}).then(res=>{
        this.validity_desc = res.data.validity_desc;
        this.detail = res.data;
        if(res.data && res.data.activity_field && res.data.activity_field.length > 0){
          this.fields = res.data.activity_field.map(m => {
            const label = res.data.fields.find(n => n.field_id === m.field_name)
            return {
              ...m,
              field_value: label ? label.field_value :''
            }
          })
        }
      })
    },
		methods: {
			search(value) {
				
			},
      chooseTabId(id){
        this.tabId = id
      },
      linkTo(item){
        console.log('进入详情页', item)
        
        getApp().payMacth(this,this.register_id,()=>{
          uni.navigateTo({
            url:'/home/mine/registration'
          })
        })
      }
			
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
      
    }
	}
</script>

<style lang="scss" scoped>
.name{
  position: relative;z-index: 30;width: 100%;
  .title{position: absolute; left: 50%; top: 0; height: 76%; display: flex; align-items: center; padding: 0 30rpx ; width: 93%; border-bottom: 2rpx dashed #ededed; transform: translateX(-50%);}
  .img{width: 102.4%; height: 160rpx; display: block;position: relative;left: -1.2%;}
}
.top{
  position: relative; 
  .img2,.img3{width: 100%; position: absolute; left: 0; right: 0;display: none;}
  .img2{top: 160rpx; height: calc(100% - 200rpx);}
  .img3{bottom: 0; height: 40rpx;}
  .con{position: relative; z-index:40; padding: 30rpx; background-color: #fff;top: -10rpx; border-radius:0 0 20rpx 20rpx;}
}
.project-item{
  // background: #ffffff; border-radius:0 0 20rpx 20rpx; position: relative;  box-shadow: 0rpx 0px 20rpx 0rpx rgba(0,0,0,0.10); width: 91.8%; margin-top: -10rpx;
  .btn{width: 176rpx; height: 60rpx;}
  .name{
    border-bottom: 1px dashed #eee; position: relative; padding: 30rpx 0; margin: 0 26rpx;
    // &::after,&::before{content: ''; display: block; width: 30rpx; height: 30rpx; bottom: 0;background-color: #fafafa; box-shadow: 0rpx 0px 18rpx 0rpx #ddd; border-radius: 50%; position: absolute;}
    // &::after{right: 0; transform: translate(50%, 50%); }
    // &::before{left: 0; transform: translate(-50%, 50%); }
  }
  .con{
    padding: 30rpx 0; border-bottom: 1px dashed #eee; margin: 0 26rpx;
    .username{font-weight: bold;}
  }
}

.main{
  background: #ffffff; padding: 40rpx 30rpx; padding-bottom: 20rpx; border-radius: 20rpx;
  box-shadow: 0rpx 0px 20rpx 0rpx rgba(0,0,0,0.10); 
}
.submit-btn{border-radius:8rpx ; width: 200rpx; flex: none; height: 80rpx; font-size: 30rpx;}
</style>
